---
id: 612e89d254fe5d3df7d6693d
title: 步驟 10
challengeType: 0
dashedName: step-10
---

# --description--

現在你已經重置了 `html` 框模型，你還需要將其傳遞給其中的元素。 爲此，你可以將 `box-sizing` 屬性設置爲 `inherit`，這將告訴目標元素使用與父元素相同的值。

你還需要定位僞元素，它們是跟隨選擇器的特殊關鍵字。 你將使用的兩個僞元素是 `::before` 和 `::after` 僞元素。

`::before` 選擇器創建一個僞元素，它是被選元素的第一個子元素，而 `::after` 選擇器創建一個僞元素，它是最後一個子元素的選定元素。 這些僞元素通常用於創建裝飾性內容，你將在本項目後面看到。

現在，創建一個 CSS 選擇器以使用 `*` 定位所有元素，並使用 `::before` 和 `::after` 包含僞元素。 將 `box-sizing` 屬性設置爲 `inherit`。

# --hints--

應該有一個 `*, ::before, ::after` 選擇器。

```js
assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after'));
```

`*, ::before, ::after` 選擇器應該將 `box-sizing` 屬性設置爲 `inherit`。

```js
assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.boxSizing === 'inherit');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Piano</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <div id="piano">
      <div class="keys">
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>

        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>

        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
      </div>
    </div>
  </body>
</html>
```

```css
--fcc-editable-region--
html {
  box-sizing: border-box;
}
--fcc-editable-region--
```
